<template>
    <div id="dashboard_box">
        <div class="title">欢迎回来，即时设计</div>
        <div class="dashboard_top">
            <div class="top_text">仪表盘</div>
            <div class="top_date">
                <svg-icon icon="date" width="18" height="20"></svg-icon>
                2021年11月16日 - 2021年12月16日
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'DashboardPage',
    }
</script>

<style lang="scss" scoped>
#dashboard_box{
    height: auto;
    width: calc(100% - 290px);
    margin-top: 50px;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    .title{
        font-size: 16px;
        font-weight: 400;
        color: rgba(125, 133, 146, 1);
    }
    .dashboard_top{
        height: 53px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content:space-between;
        .top_text{
            font-size: 36px;
            font-weight: 500;
            color: rgba(10, 22, 41, 1);
        }
        .top_date{
            width: 338px;
            height: 48px;
            opacity: 1;
            border-radius: 14px;
            background: rgba(230, 237, 245, 1);
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 16px;
            color: rgba(10, 22, 41, 1);

        }
    }
}
</style>